import React, { Component } from 'react';

import styles from './BuyerHeader.css';

import {Link} from "react-router-dom";

import LoginModel from "../components/LoginModel";
import BuyerHeaderPros from "./pros/BuyerHeaderPros";
import RegisterModel from "./RegisterModel";




class BuyerHeaderModel extends Component<BuyerHeaderPros,any> {
  constructor(props){
    super(props)
    let adminUsername = sessionStorage.getItem("adminUsername");
    let username = sessionStorage.getItem("username");
    this.state = {  flagHeader :'1' ,
      modal2Visible2:false,
      modalRegister:false,
      loading: false,
      adminUsername:adminUsername,
      username:username,
      pathNameUrl:props.pathNameUrl,
    };

    this.sssss = this.sssss.bind(this);
    this.login_model = this.login_model.bind(this);
    this.adminLogin = this.adminLogin.bind(this);
    this.adminRegister = this.adminRegister.bind(this);
    this.login_model_close = this.login_model_close.bind(this);
    this.logout = this.logout.bind(this);
    this.showUserLoginOrAdminLogin = this.showUserLoginOrAdminLogin.bind(this);
    this.adminRegisterClose = this.adminRegisterClose.bind(this);
  }


  sssss(e){
    e.preventDefault();
    var scrollTop = window.pageYOffset ||document.documentElement.scrollTop || document.body.scrollTop || 0;
    if(this.state["flagHeader"] =='2'){
      if(scrollTop<60){
        this.setState({
          flagHeader: '1'
        });
      }
    }else{
      if(scrollTop>60){
        this.setState({
          flagHeader: '2'
          });
      }
    }
  }

  login_model(e){
    e.preventDefault();
    this.setState({modal2Visible2: true});
  }
  adminLogin(e){
    e.preventDefault();
    this.setState({modal2Visible2: true});
  }

  adminRegister(e){
    e.preventDefault();
    this.setState({modalRegister: true});
  }

  login_model_close(){
    this.setState({modal2Visible2: false,username: sessionStorage.getItem("username")});
    location.reload(false);
  }

  adminRegisterClose(){
    this.setState({modalRegister: false});
  }
  userPage={
    "index":{
      pathname:"/point-shopping/user",
      state:{
        "bodyName":"index"
      }
    },
    "point":{
      pathname:"/point-shopping/user",
      state:{
        "bodyName":"point"
      }
    },
    "gift":{
      pathname:"/point-shopping/user",
      state:{
        "bodyName":"gift"
      }
    },
    "message":{
      pathname:"/point-shopping/user",
      state:{
        "bodyName":"message"
      }
    }
  };
  logout(e){
    sessionStorage.setItem("username","");
    sessionStorage.setItem("loginToken","");
    window.document.location.href='/point-shopping';
  }

  adminLogout(){
    let username = sessionStorage.getItem("adminUsername");
    sessionStorage.setItem("adminUsername","");
    sessionStorage.setItem("adminLoginToken","");
    sessionStorage.setItem(username+"_role","");
    window.document.location.href='/point-shopping/admin/login';
  }

  showTitleName(pathNameUrl:string){
    if(pathNameUrl.indexOf("/point-shopping/admin") == 0){
      return "积分商城后台管理";
    }else{
      return "金融壹账通积分商城";
    }
  }
  showTitleUrl(pathNameUrl:string){
    if(pathNameUrl.indexOf("/point-shopping/admin") == 0){
      return "/point-shopping/admin";
    }else{
      return "/point-shopping";
    }
  }
  showUserLoginOrAdminLogin(pathNameUrl:string){
    if(pathNameUrl.indexOf("/point-shopping/admin") == 0){
      return (
        <div className={styles.people_right}>
          <div className={styles.userpanel}>
            <div className={this.state["adminUsername"]==undefined||this.state["adminUsername"]==''?styles.userpanel_login:[styles.userpanel_none].join(' ')}>
              <a className={styles.mod_btn}
                 href="javascript:void(0)" onClick={this.adminLogin}>管理员登录</a>
              <a className={styles.mod_btn}
                 href="javascript:void(0)" onClick={this.adminRegister}>立即注册</a>
            </div>
            <div className={this.state["adminUsername"]!=undefined&&this.state["adminUsername"]!=''?styles.userpanel_login:[styles.userpanel_user,styles.userpanel_user_none].join(' ')}>
              <a className={styles.mod_btn}
                 href="javascript:void(0)">{this.state["adminUsername"]}</a>
              <a className={styles.mod_btn}
                 href="javascript:void(0)" onClick={this.adminLogout}>退出</a>
            </div>
          </div>
        </div>
      );
    }else{
      return (
        <div className={styles.people_right}>
          <div className={styles.userpanel}>
            <div className={this.state["username"]==undefined||this.state["username"]==''?styles.userpanel_login:[styles.userpanel_none].join(' ')}>
              <a className={styles.mod_btn}
                 href="javascript:void(0)" onClick={this.login_model}>域账号登录</a>
            </div>
            <div className={this.state["username"]!=undefined&&this.state["username"]!=''?styles.userpanel_user:[styles.userpanel_user,styles.userpanel_user_none].join(' ')}>
              <span className={styles.user_username}>{this.state["username"]}</span>
              <i className={styles.user_arrow}></i>
              <div className={styles.user_menu}>
                <ul className={styles.menu_list}>
                  <li className={[styles.list_item,styles["list_item-user"]].join(' ')}>
                    <Link to={this.userPage.index}>
                      <i className={styles.item_icon}></i>
                      <span className={styles.item_text}>个人主页</span>
                    </Link>
                  </li>
                  {/*<li className={[styles.list_item,styles["list_item-message"]].join(' ')}>
                    <Link to={this.userPage.message}>
                      <i className={styles.item_icon}></i>
                      <span className={styles.item_text}>消息中心</span>
                      <i className={styles["item_icon-message"]}></i>
                    </Link>
                  </li>
                  <li className={[styles.list_item,styles["list_item-account"]].join(' ')}>
                    <Link to={this.userPage.message}>
                      <i className={styles.item_icon}></i>
                      <span className={styles.item_text}>账户设置</span>
                    </Link>
                  </li>*/}
                  <li className={[styles.list_item,styles["list_item-logout"]].join(' ')}>
                    <a id="logout" href="javascript:void(0)" onClick={this.logout}>
                      <i className={styles.item_icon}></i>
                      <span className={styles.item_text}>退出</span>
                    </a>
                  </li>
                </ul>
              </div>
            </div>
          </div>
        </div>
      );
    }
  }

  render() {
    document.querySelector("body").onscroll = this.sssss;
    const {pathNameUrl} =this.props;
    return (
      <div className={this.state["flagHeader"]=='2'?[styles.header,styles["header-scroll"]].join(' '):styles.header} >
        <div>
          <div className={styles.logo}>
            <Link to={this.showTitleUrl(pathNameUrl)}>
              <div className={styles.logo_pic}>
              </div>
              <div className={styles.logo_name}>
                <p>{this.showTitleName(pathNameUrl)}</p>
              </div>
            </Link>
          </div>
          <div className={styles.nav}>
            <ul>
              <li><Link to="/point-shopping/GiftPage">首页</Link></li>
              <li><Link to="/point-shopping/GiftPage">提交漏洞</Link></li>
              <li><Link to="/point-shopping/GiftPage">英雄榜</Link></li>
              <li className={styles["nav_item-active"]}><Link to="/point-shopping/GiftPage">礼品</Link></li>
              <li><Link to="/point-shopping/GiftPage">博客</Link></li>
              <li><Link to="/point-shopping/GiftPage">实验室</Link></li>
              <li><Link to="/point-shopping/GiftPage">公益</Link></li>
              <li><Link to="/point-shopping/GiftPage">xSRC</Link></li>
              <li><Link to="/point-shopping/GiftPage">关于我们</Link></li>
            </ul>
          </div>
          {this.showUserLoginOrAdminLogin(pathNameUrl)}
        </div>
        <LoginModel visible={this.state["modal2Visible2"]} isAdmin={pathNameUrl.indexOf("/point-shopping/admin") == 0} funcDis={this.login_model_close}/>
        <RegisterModel visible={this.state["modalRegister"]} funcDis={this.adminRegisterClose}/>
      </div>
    );
  }
}
export default BuyerHeaderModel
